import React,{useState} from 'react';
import ReactDOM from 'react-dom';
// 非受控组件
// 受控组件 ： 当前组建的表单的值 受组件的数据控制
class App extends React.Component {
  state = {
    name: "珠峰",
    psw: 1234
  }
  submit = () => {
    // console.log(this.nameInp.value,this.pswInp.value)
    console.log(this.state.name, this.state.psw)
  }
  changeName = (e) => {
    console.log(e)
    this.setState({
      name: e.target.value
    })
  }
  changePsw = (e) => {
    this.setState({
      psw: e.target.value
    })
  }
  render() {
    return <div className=''>
      <div>
        <input ref={(el) => { this.nameInp = el }} type="text" placeholder='姓名' />
        <input ref={(el) => { this.pswInp = el }} type="password" placeholder="密码" />
        <button onClick={this.submit}>登录</button>
      </div>

      <h1>===========================</h1>

      <div>
        <input value={this.state.name} onChange={this.changeName} type="text" placeholder='姓名' />
        <input value={this.state.psw} onChange={this.changePsw} type="password" placeholder="密码" />
        <button onClick={this.submit}>登录</button>
      </div>
    </div>;
  }
}

function App2() {
  let nameInp,pswInp;
  
  let [name,setName] = useState("珠峰");
  let [psw,setPsw] = useState(123)
  const submit = ()=>{
    console.log(nameInp.value,pswInp.value)
    console.log(name,psw)
  }
  return <div className=''>
    <div>
      <input ref={(el) => { nameInp = el }} type="text" placeholder='姓名' />
      <input ref={(el) => { pswInp = el }} type="password" placeholder="密码" />
      <button onClick={submit}>登录</button>
    </div>

    <h1>===========================</h1>

    <div>
      <input value={name} onChange={(e)=>{setName(e.target.value)}} type="text" placeholder='姓名' />
      <input value={psw} onChange={(e)=>{setPsw(e.target.value)}} type="password" placeholder="密码" />
      <button onClick={submit}>登录</button>
    </div>
  </div>;
}

ReactDOM.render(<App2 />, document.getElementById('root'))